<template>
  <view class="card">
    <view class="item" v-for="summary in summaryData" :key="summary.title">
      <view>{{ summary.title }}</view>
      <view class="item-text">{{ summary.value }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    summaryData: {
      default: []
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  text-align: center;
  .item {
    color: #2e2e2e;
    width: 330rpx;
    border: 2rpx #ccc dashed;
    padding: 20rpx;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
    font-size: 30rpx;
    .item-text {
      margin-top: 20rpx;
      font-size: 35rpx;
    }
  }
}
</style>
